<template>
  <div class="table-box">
    <KingTable ref="kingTable" :tableOptions="_tableOptions">
      <!-- 表格 header 按钮 -->
      <template #tableHeader="scope">
        <el-button type="primary" :icon="CirclePlus" @click="handleBtnAction(operateType.ADD, { id: '' })"> 新增 </el-button>
        <el-button
          type="danger"
          :icon="Delete"
          :disabled="!scope.isSelected"
          @click="handleBtnAction(operateType.BATCH_DEL, scope.selectedListIds)"
        >
          删除
        </el-button>
        <el-button style="margin-bottom: 15px" type="success" @click="handleExpandAll()">
          <el-icon>
            <Fold v-if="isExpandAllTree" />
            <Expand v-else /> </el-icon
          >展开/收起
        </el-button>
      </template>
      <!-- 菜单图标 -->
      <template #icon="scope">
        <el-icon :size="18">
          <component :is="scope.row.icon"></component>
        </el-icon>
      </template>
      <!-- 表格操作 -->
      <template #operation="scope">
        <el-button size="small" type="primary" @click="handleBtnAction(operateType.ADD, scope.row)"> 添加 </el-button>
        <el-button size="small" type="primary" @click="handleBtnAction(operateType.EDIT, scope.row)"> 编辑 </el-button>
        <el-button size="small" type="primary" @click="handleCopy(scope.row)"> 复制 </el-button>
        <el-button size="small" type="danger" @click="handleBtnAction(operateType.DEL, scope.row)"> 删除 </el-button>
      </template>
    </KingTable>
    <edit ref="editRef" @on-success="fetchTableData" />
  </div>
</template>

<script setup lang="tsx" name="RoleList">
import { ref, reactive } from "vue";
import KingTable from "@/components/KingTable/index.vue";
import { CirclePlus, Delete } from "@element-plus/icons-vue";
import { operateType } from "@/plugins/commonType.enum";
import { deleteOne, postRequest } from "@/api/mains";
import { Expand, Fold } from "@element-plus/icons-vue";
import { confirm, succMsg } from "@/utils/MessageUtils";
import { TableColumnOrFormTypeEnum } from "@/plugins/commonType.enum";
import Edit from "./components/menuEdit.vue";

const isExpandAllTree = ref(false);

const editRef = ref();

// 获取 KingTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const kingTable = ref();

// 如果表格需要初始化请求参数，直接定义传给 KingTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const _initParam = reactive({ pageNum: 1, pageSize: -1, EQ_ss: 1 });

// 表格配置项
const _tableCols = [
  { type: "selection", fixed: "left", align: "center", width: 60 },
  // { type: "index", label: "序号", align: "center", width: 60 },
  { type: TableColumnOrFormTypeEnum.TREENODE, label: "树节点", align: "center", width: 160 },
  {
    prop: "icon",
    label: "显示图标",
    width: 120
  },
  {
    prop: "nodename",
    label: "菜单名称",
    width: 180
  },
  {
    prop: "perms",
    label: "权限标识",
    overflow: true,
    width: 180
  },
  {
    prop: "component",
    label: "组件路径",
    width: 180
  },
  {
    prop: "path",
    label: "路由地址",
    width: 180
  },
  {
    prop: "showorder",
    label: "显示顺序",
    width: 180
  },
  {
    prop: "menutype",
    label: "类型",
    width: 180,
    dictCode: "MenuType"
  },
  { prop: "operation", label: "操作", fixed: "right", width: 300 }
];

const _searchCols = [
  {
    prop: "EQ_menutype",
    label: "类型",
    width: 100,
    el: "select",
    dictCode: "MenuType"
  },
  {
    prop: "LIKE_nodename",
    label: "菜单名称",
    width: 100,
    el: "input"
  }
];

const _tableOptions = {
  title: "菜单列表",
  isTree: true, // 是否树列表
  pageable: false, // 是否分页
  queryUrl: "system/menu/query",
  operUrl: "system/menu",
  tableColumns: _tableCols,
  searchColumns: _searchCols,
  initParam: _initParam
};

// 重新拉取表格数据
const fetchTableData = () => {
  kingTable.value?.getTableList();
};

//展开/折叠树
const handleExpandAll = () => {
  isExpandAllTree.value = !isExpandAllTree.value;
  kingTable.value?.handleExpandTree();
};

/**
 * 增删查按钮执行的业务操作
 * @param {*} type 当前执行操作的类型
 * @param {*} row
 */
const handleBtnAction = async (type: string, row: any) => {
  switch (type) {
    case operateType.ADD: //新增操作
      if (row != null && row.id) {
        editRef.value.showDialog({ parentid: row.id });
      } else {
        editRef.value.showDialog();
      }
      break;
    case operateType.EDIT: //编辑操作
      editRef.value.showDialog(row);
      break;
    case operateType.DEL: //a删除操作
      confirm("你确定要删除当前项吗", async function () {
        // treeListRef.isLoading = true;
        const { code, msg } = await deleteOne("system/menu", row.id);
        // treeListRef.isLoading = false;
        if (code == 200) {
          succMsg(msg);
          fetchTableData();
        }
      });
      break;
  }
};

//复制
const handleCopy = (row: any) => {
  confirm("你确定要复制当前项吗", async function () {
    // treeListRef.isLoading = true;
    const { code, msg } = await postRequest("system/menu/copy", {
      id: row.id
    });
    // treeListRef.isLoading = false;
    if (code == 200) {
      succMsg(msg);
      fetchTableData();
    }
  });
};
</script>
